<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Burst Effect</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            overflow: hidden;
        }
        .circle {
            position: absolute;
            border-radius: 50%;
            opacity: 0; /* 初始透明 */
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
</head>
<body>

<button id="burst-button">爆炸特效</button>

<script>
    const burstButton = document.getElementById('burst-button');

    burstButton.addEventListener('click', () => {
        createBurst();
    });

    function createBurst() {
        const count = 12; // 圆形数量
        const colors = ["white", "red", "green", "blue"]; // 颜色数组
        const radius = { min: 50, max: 150 }; // 半径范围

        for (let i = 0; i < count; i++) {
            const circle = document.createElement('div');
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            const angle = (i / count) * (Math.PI * 2); // 计算角度

            // 设置圆形样式
            circle.classList.add('circle');
            circle.style.width = '20px';
            circle.style.height = '20px';
            circle.style.backgroundColor = randomColor;
            circle.style.left = '50%';
            circle.style.top = '50%';
            circle.style.transform = `translate(-50%, -50%)`; // 定位到中心
            document.body.appendChild(circle);

            // 动画效果
            const distance = gsap.utils.random(radius.min, radius.max);
            const duration = 1.5; // 动画持续时间

            gsap.to(circle, {
                x: Math.cos(angle) * distance,
                y: Math.sin(angle) * distance,
                opacity: 1,
                duration: duration,
                ease: "power1.out",
                onComplete: () => {
                    gsap.to(circle, {
                        opacity: 0,
                        duration: 0.5,
                        onComplete: () => {
                            circle.remove(); // 动画完成后移除元素
                        }
                    });
                }
            });
        }
    }
</script>

</body>
</html>
